<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    {{msg}}
    <!-- 3.组件的使用 -->
    <button @click="clickHanler">父组件按钮</button>
    <br>
    <!-- <my-component data="给你100块"></my-component> -->
    <br>
    <!-- <my-component :count='20' :boolean="true" :real-age="60"></my-component> -->
    <br>
    <my-component @son-handler="fatherHandler" :object="obj"></my-component>
  </div>
  <script>
    // 1.声明组件
    let myComponent = {
      // props: [ 'data' ],
      props: {
        // data: String,
        data: {
          type: String,
          default: '我有500块'
        },
        // count: Number,
        count: [ String, Number ],
        boolean: Boolean,
        object: {
          type: Object,
          // required: true,
          default() {
            return {
              name: '李四',
              age: 20
            }
          }
        },
        realAge: {
          type: Number,
          validator(value) {
            // if(value < 50){
            //   return true
            // } else {
            //   return false
            // }
            return value < 50
          }
        }
        // object: Object,
      },
      data() {
        return {
          name: '张三',
          age: 20,
          description: '我是子组件的数据'
        }
      },
      template: `
        <button @click="clickHandler">
          子组件按钮{{name}}
          <br>
          父组件给的：{{data}}
          <br>
          数字：{{count}}
          <br>
          布尔：{{boolean}}
          <br>
          对象：{{object}}
          <br>
          realAge：{{realAge}}
        </button>
      `,
      methods: {
        clickHandler() {
          // this.name = "李四"
          // 子组件向父组件传参
          this.$emit('son-handler', this.description)
        }
      }
    }
    // 2.组件注册（全局注册）
    // Vue.component('my-component',myComponent)
    
    let vm = new Vue({
      el: '#app',
      data: {
        msg: '给你1000块',
        obj: {
          name: '张三',
          age: 12
        }
      },
      methods: {
        // 点击事件处理函数
        clickHanler() {
          this.obj.name = "路人甲"
        },
        fatherHandler(val) {
          // alert('父组件')
          // val就是子组件传递上来的参数
          console.log(val);
        }
      },
      components: {
        'my-component': myComponent
      }
    })
  </script>
</body>
</html>